<template>
	<div>
		<uw-dialog title="添加优惠券" width="500px" v-model="dialogVisible">
			<template #default>
				<el-form ref="ruleFormRef" label-width="125" :model="form" :rules="rules" >
					<el-form-item label="优惠券名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="优惠券类型" prop="type">
						<el-select v-model="form.type" placeholder="请选择优惠券类型" @change="changeSelectType">
							<el-option label="满减券" :value="1" />
							<el-option label="折扣券" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.type == 1" label="优惠券金额" prop="value">
						<el-input v-model="form.value" placeholder="请输入" >
							<template #append>元</template>
						</el-input>
					</el-form-item>
					<el-form-item v-if="form.type == 2" label="优惠券折扣" prop="value">
						<el-input v-model="form.value" placeholder="请输入">
							<template #append>折</template>
						</el-input>
					</el-form-item>
					<el-form-item label="关联商品" prop="goods">
						<div>
							<div>
								<el-button type="primary" @click="showGoods=true">添加商品</el-button>
							</div>
							<div>
								<el-tag style="margin-right: 6px;" v-for="(item,index) in goodsList" :key="index" closable @close="CloseTag(item)">{{item.name}}</el-tag>
							</div>
						</div>
					</el-form-item>
					<el-form-item v-if="form.type != 1" label="优惠券使用条件" prop="condition">
						<el-select v-model="form.condition" placeholder="请选择优惠券使用条件">
							<el-option label="无门槛" :value="1" />
							<el-option label="满金额可用" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.condition == 2" label="最低消费金额" prop="minAmount">
						<el-input v-model="form.minAmount" placeholder="请输入" >
							<template #append>元</template>
						</el-input>
					</el-form-item>
					<el-form-item v-if="form.condition == 2 && form.type == 2" label="最高优惠金额" prop="maxAmount">
						<el-input v-model="form.maxAmount" placeholder="请输入" >
							<template #append>元</template>
						</el-input>
					</el-form-item>
					<el-form-item label="开始时间" prop="startDate">
						<el-date-picker style="width: 100%;" v-model="form.startDate" type="datetime" placeholder="选择日期时间" />
					</el-form-item>
					<el-form-item label="结束时间" prop="endDate">
						<el-date-picker style="width: 100%;" v-model="form.endDate" type="datetime" placeholder="选择日期时间" />
					</el-form-item>
					<el-form-item label="描述说明" prop="description">
						<el-input v-model="form.description" placeholder="请输入" type="textarea" />
					</el-form-item>
				</el-form>
			</template>
			<template #footer>
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</template>
		</uw-dialog>
		<uw-goods v-model="showGoods" @change="goodsChange"></uw-goods>
	</div>
</template>

<script setup lang="ts">
	import { ref , watch , reactive, nextTick } from 'vue';
	import { ElMessage } from 'element-plus';
	import { createCouponApi , updateCouponApi } from '@/api/coupon';
	import { addFormData , addFormRules , Coupon} from '@/api/coupon';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['update:modelValue','change'])
	const ruleFormRef = ref()
	const dialogVisible = ref(false)
	const form = reactive(addFormData)
	const rules = ref(addFormRules)
	const editId = ref()
	const showGoods = ref(false)
	const goodsList = ref([])
	watch(() => props.modelValue, async (val:boolean) => {
		dialogVisible.value = val
	})
	watch(()=>dialogVisible.value,(newVal)=>{
		if(!newVal){
			editId.value = ''
			ruleFormRef.value.resetFields()
			goodsList.value = []
		}
		console.log(form)
		emit('update:modelValue',newVal)
	})
	const changeSelectType = (row:number) => {
		form.condition = row === 1 ? 2 : null
	}
	const editChange = (row:Coupon) => {
		nextTick(()=>{
			editId.value = row.id
			Object.keys(form).forEach((key:string)=>{
				form[key] = row[key]
			})
			if(row.couponGoods.length){
				form.goods = row.couponGoods.map((val)=>val.goodsId)
				goodsList.value = row.couponGoods.map((val)=>{
					return val.goods
				})
			}
		})
	}
	const handleClose = () => {
		editId.value = ''
		dialogVisible.value = false
		ruleFormRef.value.resetFields()
	}
	const submit = () => {
		ruleFormRef.value.validate(async (valid: any) => {
			if (!valid) return
			const { message } = editId.value ? await updateCouponApi(editId.value,form)  : await createCouponApi(form)
			ElMessage.success(message)
			dialogVisible.value = false
			emit('change')
			handleClose()
		});
	}
	const goodsChange = (row:any) => {
		form.goods = row.map((val:any)=>val.id)
		goodsList.value = row
	}
	const CloseTag = (row:any) => {
		goodsList.value = goodsList.value.filter((val:any)=>val.id !== row.id)
		form.goods = goodsList.value.map((val:any)=>val.id)
	}
	defineExpose({
		editChange,
	})
</script>

<style>
</style>